<template>
  <div class="article_add">

    <el-header class="top">
      <i class="el-icon-s-home"></i>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/' }">文章管理</el-breadcrumb-item>
        <el-breadcrumb-item>编辑文章</el-breadcrumb-item>
      </el-breadcrumb>
    </el-header>

 
    <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>编辑文章</span>
          <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
        </div>
       
        <!-- 卡片组件的内容-添加表单 -->
        <el-form ref="addForm" :model="arc" label-width="80px" :rules="formRules" >

            <el-form-item label="标题" prop="title">
              <el-input v-model="arc.title" style="width:300px" placeholder="输入文章标题"></el-input>
            </el-form-item>

            <el-form-item label="子标题" prop="sub_title">
              <el-input v-model="arc.sub_title"></el-input>
            </el-form-item>

            <el-form-item label="分类" prop="cate_id">
              <el-select v-model="arc.cate_id" placeholder="请选择活动区域">
                <el-option label="分类1" :value="1"></el-option>
                <el-option label="分类2" :value="2"></el-option>
              </el-select>
            </el-form-item>
            
            <el-form-item label="内容" prop="content">
              <el-input type="textarea" v-model="arc.content" placeholder="输入文章内容"
              rows="5"
              :show-word-limit="true"
              ></el-input>
            </el-form-item>

            <el-form-item label="浏览">
              <el-input v-model="arc.view"></el-input>
            </el-form-item>

            <el-form-item label="点赞">
              <el-input v-model="arc.like"></el-input>
            </el-form-item>

            <el-form-item label="推荐首页">
              <el-checkbox label="是" name="type" v-model="arc.recommend"></el-checkbox>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="onSubmit('addForm')">保 存</el-button>
              <el-button @click="resetForm">重 置</el-button>
            </el-form-item>

        </el-form>

    </el-card>


  </div>
</template>

<script>
  import http from '../utils/http';

  export default {
    data(){
      return {
        //把表单数据放一个对象中
        arc:{
          title:"",
          sub_title:"",
          cate_id:1,//指写某个值，让默认选中
          content:"",
          view:0,
          like:0,
          recommend:false  //如果只有一个复选框，true/false 来控制选中或未选中
        },
        //验证规则
        formRules:{
          title: [
            { required: true, message: '请输入标题', trigger: 'blur' },
            { min: 3, max: 30, message: '长度在 3 到30个字符', trigger: 'blur' }
          ],
          sub_title: [
            { required: true, message: '请输入子标题', trigger: 'blur' },
            { min: 3, max: 20, message: '长度在 3 到20个字符', trigger: 'blur' }
          ],
          cate_id: [
            { required: true, message: '请选择分类', trigger: 'blur' }
          ],
          content: [
            { required: true, message: '请输入内容', trigger: 'blur' },
            { min: 10, message: '最少10个字', trigger: 'blur' }
          ]
        },
        arc_id:0, //文章，分类id
        cate_id:0
      }
    },
    methods:{
      onSubmit(formName){
        console.log("提交表单")
        //  this.$refs[formName] 获取表单
        // this.$refs[formName].validate 调用表单验证方法，告诉我们验证是否通过
        this.$refs[formName].validate(async (valid)=>{
          console.log(valid) //true 通过
          
          // 通过axios请求后端，把数据发给别个，让别个保存起来。
          if(valid){
              let res = await http.post("/api/article/article_add",{
                    title:this.arc.title,
                    sub_title:this.arc.sub_title,
                    cate_id:this.arc.cate_id,//指写某个值，让默认选中
                    content:this.arc.content,
                    view:this.arc.view,
                    like:this.arc.like,
                    recommend:this.arc.recommend 
                  }
              )
              console.log(res)

              // 成功
              if(res.data.code == 0){
                // Message 消息提示
                this.$message({
                  type:"success",
                  message:"添加成功"
                })
                //重置表单
                this.resetForm();

              }else{
                this.$message({
                  type:"error",
                  message:res.data.msg
                })
              }
          }else{
            //没有通过验证，给用户一个提示
            this.$message({
              type:"warning",
              message:"请按要求，完整填写表单!"
            })
          }
        });
      },
      resetForm(){
        this.$refs.addForm.resetFields();
        //没有验证的表单元素不会被重置，哪我们就手动重置。
        this.arc.view=0;
        this.arc.like=0;
        this.arc.recommend=false
      },
      async getArticleInfo(){
        // 取参数
        const params = this.$route.params;
        console.log("获取文章信息",this.$route.params) // {arc_id: '61', class_id: '1'}

        this.arc_id = params.arc_id;
        this.cate_id = params.cate_id;

        // 发请求
        // 接口地址：http://127.0.0.1:3000/article/article_edit/34，参数是在url
        let url = `/api/article/article_edit/${params.arc_id}`

        const res = await http.get(url)
        console.log(res)

        // 拿到结果
        const ret = res.data;
        console.log('接口给的',ret)
        const arc = ret.data; //文章对象(信息)

        // 把数据显示在对应的表单项上(回显数据)
        // this.arc.title = '我是悟空'

        // 表单对应的字段
        // title:"",
        // sub_title:"",
        // cate_id:1,//指写某个值，让默认选中
        // content:"",
        // view:0,
        // like:0,
        // recommend:false  //如果只有一个复选框，true/false 来控制选中或未选中

        // 接口返回的字段
        console.log('接口糽的文章信息',arc)

        this.arc.title = arc.title;
        this.arc.sub_title = arc.sub_title;
        this.arc.cate_id = arc.cate_id;//指写某个值，让默认选中
        this.arc.content = arc.content;
        this.arc.view= arc.view;
        this.arc.like= arc.like;

        // 后端返回的是0，1 。页面上true/false 来控制选中或未选中,所以需要单独处理
        // this.arc.recommend = arc.recommend;
        this.arc.recommend = arc.recommend == 0 ? false : true;

      }
    },
    created(){
      this.getArticleInfo()
    }
  }
</script>

<style lang="less" scoped>
.article_add{
  // margin:15px;
  
  // /deep/ 深度选择器，可以重置组件内置的样式。别忘了样式要加scoped，
  // 有可能还需要!important来提升样式的优先级。
  /deep/.el-header {
    display: flex;
    align-items: center;
    height: 62px !important;
    background: #edebeb;

    .el-icon-s-home {
      color: #000000;
      font-size: 20px;
    }

    .el-breadcrumb {
      height: 35px;
      display: flex;
      align-items: center;
      margin-bottom: 0;
      font-size: 12px;
    }
  }

  .box-card{
    margin: 10px;
    
  }
}
</style>